<template>
    <div v-loading="loading" class="w-100">
        <div class="flex py-2">
            <div class="label">状态</div>
            <div class="flex-1">
                <el-switch v-model="value.state" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"
                    style="--el-switch-on-color: var(--el-color-success);" inline-prompt />
                <div class="text">通知开关，开启或关闭该通知</div>
                <div class="text" v-if="scene && scene.length > 0">通知场景：{{ scene.join('、') }}</div>
            </div>
        </div>
        <div v-if="value.state">
            <div v-if="voice_template">
                <div class="flex py-2">
                    <div class="label">电话模板ID</div>
                    <div class="flex-1">
                        <el-input type="text" v-model="value.voice_template" @change="updateValue" />
                        <div class="text">电话模板：<span class="link" @click="copyText(voice_template)">{{ voice_template }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex py-2">
                    <div class="label">电话通知</div>
                    <div class="flex-1">
                        <el-switch v-model="value.voice_mobile" :active-value="1" :inactive-value="0" active-text="开启"
                            inactive-text="关闭" style="--el-switch-on-color: var(--el-color-success);" inline-prompt />
                        <div class="text">电话通知开关，开启或关闭该通知</div>
                    </div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">短信模板ID</div>
                <div class="flex-1">
                    <el-input type="text" v-model="value.sms_template" @change="updateValue" />
                    <div class="text">短信模板：<span class="link" @click="copyText(sms_template)">{{ sms_template }}</span>
                    </div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">短信通知</div>
                <div class="flex-1">
                    <el-switch v-model="value.mobile" :active-value="1" :inactive-value="0" active-text="开启"
                        inactive-text="关闭" style="--el-switch-on-color: var(--el-color-success);" inline-prompt />
                    <div class="text">短信通知开关，开启或关闭该通知</div>
                </div>
            </div>
            <div class="flex py-2">
                <div class="label">公众号通知</div>
                <div class="flex-1">
                    <el-switch v-model="value.wx" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"
                        style="--el-switch-on-color: var(--el-color-success);" inline-prompt />
                    <div class="text">公众号通知开关，开启或关闭该通知</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({})
        },
        sms_template: {
            type: String,
            default: ''
        },
        voice_template: {
            type: String,
            default: ''
        },
        scene: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false,
            value: {
                state: 1,
                sms_template: '',
                mobile: 1,
                voice_mobile: 1,
                wx: 1,
            },
        };
    },
    created() {
        this.value = this.modelValue;
    },
    methods: {
        copyText(text) {
            try {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(_ => {
                        this.$useMessage('已复制', 'success');
                    })
                } else {
                    let input = document.createElement('input');
                    input.value = text;
                    document.body.appendChild(input);
                    input.select();
                    document.execCommand('Copy');
                    input.remove();
                    this.$useMessage('已复制', 'success');
                }
            } catch (error) {
                return this.$useMessage(error.message, 'error');
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.w-100 {
    width: 50vw;
}

.text {
    color: rgb(102, 102, 102);
    padding: 5px 0px 0px;
    font-size: 12px;
}

.link {
    color: var(--el-color-primary);
    cursor: pointer;
}

.label {
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

.py-2 {
    padding: 10px 0;
}


.flex-1 {
    flex: 1;
}
</style>